<template>
  <div class='cart' v-if='cart.length > 0'>
    <van-swipe-cell v-for='prod in cart' :key='prod.id'>
      <van-checkbox
        :value='prod.checked'
        @click='toggleCartItem(prod.id)'
        class='btn'
      ></van-checkbox>
      <van-card
        :num='prod.amount'
        :price='prod.price'
        :desc='prod.desc'
        :title='prod.title'
        class='goods-card'
        :thumb='prod.img'
      >
        <template #num>
          <van-stepper
            theme='round'
            button-size='22'
            :value='prod.amount'
            @change='
              value => {
                changeAmount(prod.id, value);
              }
            '
          />
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text='删除'
          type='danger'
          class='delete-button'
          @click='removeCartItem(prod.id)'
        />
      </template>
    </van-swipe-cell>
    <van-submit-bar :price='totalMoney' button-text='提交订单' @submit="pushshop">
      <van-checkbox :value='checkedAll' @click='toggleAllHandler'
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
  <div v-else >{{jumpToClassic()}}</div>
</template>

<script>
/* eslint-disable quotes */
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapGetters('cart', ['checkedAll', 'totalMoney']),
    // ...mapState([{
    //   cart: state => state.cart.cart
    // }])
    // 通常将vuex得state中得数据和getter计算出的数据映射到computed
    cart () {
      console.log(this.$store.state.cart.cart, '1')
      return this.$store.state.cart.cart
      // return this.cart
    }

    // checkedAllItem () {
    //   return this.checkedAll
    //   // return this.$store.getters.checkedAll
    // },
    // totalPrice () {
    //   return this.totalMoney
    // }
  },
  created () {
    console.log(this, '2')
  },
  methods: {
    // 映射到当前组件中,调用mutations就方便了
    ...mapMutations(
      'cart',
      ['changeCartItemAmount',
        'removeCartItem',
        'toggleCartItem',
        'checkAllCartItem']
    ),
    jumpToClassic () {
      setTimeout(() => {
        this.$router.push('/classic')
      }, 2000)
    },
    // 点击数量加减，输入数量
    changeAmount (id, value) {
      console.log(id, value)
      this.changeCartItemAmount({
        id,
        amount: value
      })
      // this.$store.commit('changeCartItemAmount', {
      //   id: id,
      //   amount: value
      // })
    },
    // 删除购物车商品
    // deleteCart (id) {
    //   this.removeCartItem({
    //     id: id
    //   })
    //   console.log(id)
    //   // this.$store.commit('removeCartItem', {
    //   //   id: id
    //   // })
    // },
    toggleAllHandler () {
      this.checkAllCartItem(!this.checkedAll)
    },
    pushshop () {
      console.log(123)
      this.$router.push("/mine")
    }
  }
}
</script>

<style lang='scss' scoped>
.delete-button {
  height: 100%;
  width: 80px;
}
.btn {
  margin-left: 20px;
  margin-top: 4px;
}
.cart {
  margin-top: 40px;
  padding-bottom: 50px;
}
</style>
